import React, { useReducer } from 'react'

export default function App() {
  const [state, dispatch] = useReducer(
    function reducer(state, action) {
      // 这个函数是用来修改数据的一个函数,每次要修改数据这个函数会被触发
      //state 就是useReducer帮我们管理的状态数据
      //action 是一个对象,用来描述,要把数据改成什么样式
      // 这个reducer函数的返回值是什么,状态就被改成了什么
      switch (action.type) {
        case 'inc':
          return {
            ...state,
            // count:0
            // msg: 'hello'
            count: state.count + 1,
          }
        case 'dec':
          return {
            ...state,
            // count:0
            // msg: 'hello'
            count: state.count - 1,
          }
      }
    },
    // state的初始数据
    { count: 0, msg: 'hello' }
  )

  return (
    <div>
      <p>{state.count}</p>
      <p>{state.msg}</p>
      <button
        onClick={() => {
          // 调用dispatch, reducer函数就会被调用
          dispatch({ type: 'inc' })
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          // 调用dispatch, reducer函数就会被调用
          dispatch({ type: 'dec' })
        }}
      >
        -
      </button>
    </div>
  )
}
